<template>
    <div>
        <pullrefesh @fetchData="fetchData" @refresh="refresh" @getScrollTop="getScrollTop" :scrollTop="scroll" style="margin-top:51px" v-if="this.$store.state.staff.NotHandoutList" :dataLoaded="dataLoaded">
            <div v-for="item in this.$store.state.staff.NotHandoutList" :key="item.id">
                <spacing></spacing>
                <div>
                    <pending @nd="wait(item.EVENT_ID)" :pending="item"></pending>
                </div>
            </div> 
        </pullrefesh>
        <Row class="r-failed" type="flex" justify="center" v-if="!this.$store.state.staff.HandoutList && Cload === false">
            <Col span=9>
                <img src="static/staff/nodate.png" height="100" alt="">
                <p>无已处理建议</p>
            </Col>
        </Row>
        <Spin size="large" fix v-if="Cload"></Spin>
    </div>
</template>

<script>
export default {
    data() {
        return {
            load: true,
            ndata: true,
            shuju: false,
            Cload: false,
            pending: '',
            dataLoaded: false,
            scroll: '',
            Npstate: false // 后台拿到数据与否时提示组件显示状态
        }
    },
    computed: {
        li: function() {
            console.log('dfghsh')
            console.log(this.$route.query.Nnum)
        }
    },
    methods: {
        // 点击子组件查看详情触发建议
        ndatachange() {
            this.ndata = false
        },
        wait(z) { // 跳入详情页面
            this.$emit('wt')
            this.$nextTick(() => {
                this.$router.push({
                    path: '/staffxiangqing',
                    query: {
                        Sindex: z,
                        num: 0
                    }
                })
            })
        },
        /**
         * 设置情况反应（教职工）未处理
         * @staffState 处理状态
         */
        async SetEventflowList(page) {
            const State = this.$store.state
            let EventflowList = await this.$store.dispatch('getEventflowList', {
                userId: State.userInfo.USER_ID,
                type: 0,
                page: page
            })
             // 组件创建成功并判断有用户登录后修改load加载的显示
            if (EventflowList.status === 0) {
                this.$store.commit('detaildata_List', EventflowList.result)
            } else {
                this.dataLoaded = true
                this.Npstate = true
            }
        },
         /**
         * 设置已分发列表
         * @pages 页数
         */
        async NsetEventflowList(pages) {
            const State = this.$store.state
            let HandoutList = await this.$store.dispatch('getEventflowList', {
                userId: State.userInfo.USER_ID,
                type: 0,
                page: pages
            })
             // 组件创建成功并判断有用户登录后修改load加载的显示
            if (HandoutList.status === 0) {
                this.$store.commit('staff_SET_NotHandoutList', HandoutList.result)
            } else if (HandoutList.result.length <= 0) {
                this.dataLoaded = true // 未获取到数据显示未拿到数据的组件
                this.Npstate = true
            }
        },
        fetchData() { // 下拉只取到增加一的页面
            if (!this.dataLoaded) { // 判断提示没有拿到数据的状态、每执行一次函数请求的页面数加1
                let tempage = this.$store.state.staff.peddingPage
                tempage++
                this.$store.commit('set_changepagepedding', tempage)
                this.NsetEventflowList(this.$store.state.staff.peddingPage)
            }
        },
        async refresh() { // 上拉只取到第一页最新的数据
            this.Cload = true
            this.$store.commit('staff_SET_NotHandoutList', null) // 因为是请求最新的页面、需要传入null将之前的数据清空
            this.dataLoaded = false
            this.$store.commit('set_changepagepedding', 1)
            await this.NsetEventflowList(1)
            this.Cload = false
        },
        getScrollTop(scrollTop) { // 获取到滑动区的高度并赋值给this.scroll
            this.scroll = scrollTop
        }
    },
    components: {
        spacing: () => import('../../components/staff/spacing.vue'), // 间隔条
        pending: () => import('../../components/staff/pending.vue'), // 待处理组件
        pullrefesh: () => import('../common/pullRefresh.vue') // 可滑动公共组件
    },
    created() {
        const Vm = this
        Vm.scroll = Vm.$store.state.staff.weichuliScroll // 组件被创建成功后获取到私有vuex中可滚动区域的高度
        if (this.$route.query.Nnum) {
            console.log('二次请求页面数据')
            this.$store.commit('detaildata_List', null)
            Vm.SetEventflowList(1)
        }
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            Vm.SetEventflowList(1)
        }
        isUserInfo().then(() => {
            Step()
        })
    },
    destroyed() { // 生命周期里当前组件销毁后执行将获取到的可滚动区域的高度存放到vuex中
        this.$store.commit('SET_weichuliScroll', this.scroll)
    }
}
</script>

<style>
.r-failed{
    text-align:center !important;
    padding-top:150px;
    color: #919191;
}
</style>
